<template>
	<view class="page">
		<view class="basics-info">
			<view class="title">
				基本信息
			</view>
			<view class="row">
				<view class="lf">
					专业名字
				</view>
				<view class="rt">
					动画专业
				</view>
			</view>
			<view class="row">
				<view class="lf">
					专业代码
				</view>
				<view class="rt">
					2566124
				</view>
			</view>
			<view class="row">
				<view class="lf">
					授予学位
				</view>
				<view class="rt">
					哲学学士
				</view>
			</view>
			<view class="row">
				<view class="lf">
					休业年限
				</view>
				<view class="rt">
					四年
				</view>
			</view>
			<view class="row">
				<view class="lf">
					学科门类
				</view>
				<view class="rt">
					哲学
				</view>
			</view>
			<view class="row">
				<view class="lf">
					专业类
				</view>
				<view class="rt">
					哲学类
				</view>
			</view>
			<view class="row">
				<view class="lf">
					选考(学科)建议
				</view>
				<view class="rt">
					不限
				</view>
			</view>
		</view>
		<!-- 性别比例 -->
		<view class="qiun-columns">
			<view class="title">
				性别比例
			</view>
			<view class="qiun-charts">
				<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
			</view>
		</view>
		<!-- 就业率 -->
		<view class="employment-rate">
			<view class="title">
				就业率(近三年)
			</view>
			<view class="cont">
				<view class="item">
					<view class="tip-wrap">
						<image class="bg" src="../../static/specialtyDetails-1.png" mode=""></image>
						60%-65%
					</view>
					<view class="circle circle-1">
						2015
					</view>
				</view>
				<view class="item">
					<view class="tip-wrap">
						<image class="bg" src="../../static/specialtyDetails-2.png" mode=""></image>
						60%-65%
					</view>
					<view class="circle circle-2">
						2015
					</view>
				</view>
				<view class="item">
					<view class="tip-wrap">
						<image class="bg" src="../../static/specialtyDetails-3.png" mode=""></image>
						60%-65%
					</view>
					<view class="circle circle-3">
						2015
					</view>
				</view>
			</view>
		</view>
		<!-- 第一印象 -->
		<view class="first-impression">
			<view class="title">
				第一印象
			</view>
			<view class="icont">
				<view class="item">
					<image class="icon" src="../../static/specialtyDetails-4.png"></image>
					<view class="text">
						数学
					</view>
				</view>
				<view class="item">
					<image class="icon" src="../../static/specialtyDetails-5.png"></image>
					<view class="text">
						推理
					</view>
				</view>
				<view class="item">
					<image class="icon" src="../../static/specialtyDetails-6.png"></image>
					<view class="text">
						规律
					</view>
				</view>
				<view class="item">
					<image class="icon" src="../../static/specialtyDetails-7.png"></image>
					<view class="text">
						逻辑
					</view>
				</view>
			</view>
		</view>
		<!-- 专业详情 -->
		<view class="professional-details">
			<view class="title">
				专业详情
				<navigator class="more" url="../register/register" hover-class="none">更多</navigator>
			</view>
			<view class="cont">
				<view class="item" v-for="(index,item) in 3" :key="index">
					<view class="head">
						是什么？
					</view>
					<view class="body">
						重庆大学是教育部直属的全国重点大学，是国家“211工程”和“985工程”重点建设的高水平研究型综合性大学，是国家“世界一流大学建设高校（A类）”。学校地处国家西南工商业重镇、长江上游经济中心——重庆市，坐落在人文荟萃的文化名区——沙坪坝区。
					</view>
				</view>
			</view>
		</view>
		<!-- 开设院校 -->
		<view class="open-universities">
			<view class="title">
				开设院校
			</view>
			<view class="select-wrap">
				<view class="select">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input" v-if="index == -1">所属地区</view>
						<view class="uni-input" v-else>{{array[index]}}</view>
						<view class="iconfont iconxxjtfull"></view>
					</picker>
				</view>
				<view class="select">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input" v-if="index == -1">学校类型</view>
						<view class="uni-input" v-else>{{array[index]}}</view>
						<view class="iconfont iconxxjtfull"></view>
					</picker>
				</view>
				<view class="select">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input" v-if="index == -1">主管部门</view>
						<view class="uni-input" v-else>{{array[index]}}</view>
						<view class="iconfont iconxxjtfull"></view>
					</picker>
				</view>
				<view class="select">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input" v-if="index == -1">办学类型</view>
						<view class="uni-input" v-else>{{array[index]}}</view>
						<view class="iconfont iconxxjtfull"></view>
					</picker>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list-wrap">
				<view class="item" v-for="(item,index) in 5" :key="index">
					<navigator class="lf" url="../collegesDetail/collegesDetail" hover-class="none">
						<image src="../../static/gaoxiao1.png" mode=""></image>
					</navigator>
					<view class="md">
						<view class="name-tags-address">
							<view class="name">北京大学</view>
							<view class="tags">
								<text>985</text>
								<text>211</text>
								<text>985</text>
							</view>
							<view class="address">
								<text class="iconfont icondingwei"></text>
								北京
							</view>
						</view>
						<view class="type">
							综合|教育部
						</view>
					</view>
					<view class="rt">
						+对比
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaRing = null;
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				seriesDatas: [{
					"name": "男生",
					"data": 50
				}, {
					"name": "女生",
					"data": 50
				}],
				index: -1,
				array: ['2020-01-01', '2020-01-02', '2020-01-03', '2020-01-04'],
			}
		},
		onShow() {
			_self = this;
			this.cWidth = uni.upx2px(710);
			this.cHeight = uni.upx2px(500);
			let Ring = {
				series: []
			};
			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
			Ring.series = _self.seriesDatas;
			_self.showRing("canvasRing", Ring);
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					legend: true,
					// title: {
					// 	name: '70%',
					// 	color: '#7cb5ec',
					// 	fontSize: 25 * _self.pixelRatio,
					// 	offsetY: -20 * _self.pixelRatio,
					// },
					// subtitle: {
					// 	name: '收益率',
					// 	color: '#666666',
					// 	fontSize: 15 * _self.pixelRatio,
					// 	offsetY: 30 * _self.pixelRatio,
					// },
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 20 * _self.pixelRatio, //圆环的宽度
							labelWidth: 15
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
				});
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'specialtyDetails.scss';
	@import '@/common/icon/iconfont.css';
</style>
